<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>免费天气API测试 - 哈尔滨信息工程学院</title>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
        }

        .container {
            background: white;
            border-radius: 12px;
            padding: 30px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        }

        h1 {
            color: #2c3e50;
            text-align: center;
            margin-bottom: 30px;
            font-size: 28px;
        }

        .api-section {
            margin-bottom: 40px;
            border: 1px solid #e1e8ed;
            border-radius: 8px;
            padding: 20px;
            background: #f8f9fa;
        }

        .api-title {
            font-size: 20px;
            font-weight: bold;
            color: #1976d2;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
        }

        .api-title .status {
            margin-left: 10px;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 12px;
            font-weight: normal;
        }

        .status.free { background: #e8f5e8; color: #2e7d32; }
        .status.limited { background: #fff3e0; color: #f57c00; }
        .status.error { background: #ffebee; color: #d32f2f; }

        .api-info {
            margin-bottom: 15px;
            color: #666;
        }

        .test-button {
            background: #1976d2;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 6px;
            cursor: pointer;
            font-size: 14px;
            margin-right: 10px;
            margin-bottom: 10px;
        }

        .test-button:hover {
            background: #1565c0;
        }

        .test-button:disabled {
            background: #ccc;
            cursor: not-allowed;
        }

        .result-area {
            background: #f5f5f5;
            border: 1px solid #ddd;
            border-radius: 6px;
            padding: 15px;
            margin-top: 15px;
            font-family: 'Courier New', monospace;
            font-size: 13px;
            max-height: 300px;
            overflow-y: auto;
        }

        .weather-display {
            background: linear-gradient(135deg, #74b9ff, #0984e3);
            color: white;
            padding: 20px;
            border-radius: 10px;
            text-align: center;
            margin-top: 20px;
        }

        .weather-display h3 {
            margin: 0 0 10px 0;
            font-size: 24px;
        }

        .weather-display .temp {
            font-size: 36px;
            font-weight: bold;
            margin: 10px 0;
        }

        .weather-display .desc {
            font-size: 16px;
            opacity: 0.9;
        }

        .loading {
            color: #1976d2;
            font-style: italic;
        }

        .error {
            color: #d32f2f;
            background: #ffebee;
            padding: 10px;
            border-radius: 4px;
            border-left: 4px solid #d32f2f;
        }

        .success {
            color: #2e7d32;
            background: #e8f5e8;
            padding: 10px;
            border-radius: 4px;
            border-left: 4px solid #2e7d32;
        }

        .cors-notice {
            background: #fff3cd;
            border: 1px solid #ffeaa7;
            border-radius: 6px;
            padding: 15px;
            margin-bottom: 20px;
            color: #856404;
        }

        .code-sample {
            background: #2d3748;
            color: #e2e8f0;
            padding: 15px;
            border-radius: 6px;
            margin: 10px 0;
            font-family: 'Courier New', monospace;
            font-size: 13px;
            overflow-x: auto;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>🌤️ 免费天气API测试平台</h1>
        
        <div class="cors-notice">
            <strong>⚠️ CORS 跨域提醒:</strong> 
            某些API可能因为浏览器CORS策略无法直接访问，这是正常现象。
            在Vue项目中可以通过代理配置或后端转发解决。
        </div>

        <!-- OpenWeatherMap API 测试 -->
        <div class="api-section">
            <div class="api-title">
                🌍 OpenWeatherMap API 
                <span class="status free">免费版</span>
            </div>
            <div class="api-info">
                <strong>特点:</strong> 全球最受欢迎的天气API，免费版每分钟60次调用<br>
                <strong>官网:</strong> <a href="https://openweathermap.org/api" target="_blank">https://openweathermap.org/api</a><br>
                <strong>免费额度:</strong> 1000次/天，60次/分钟<br>
                <strong>注册:</strong> 需要注册获取API Key
            </div>
            
            <button class="test-button" onclick="testOpenWeatherMap()">测试 OpenWeatherMap</button>
            <button class="test-button" onclick="testOpenWeatherMapWithKey()">使用API Key测试</button>
            
            <div class="code-sample">
API调用示例：https://api.openweathermap.org/data/2.5/weather?q=Harbin,CN&appid=YOUR_API_KEY&units=metric&lang=zh_cn
            </div>
            
            <div id="openweather-result" class="result-area"></div>
        </div>

        <!-- 和风天气API 测试 -->
        <div class="api-section">
            <div class="api-title">
                🇨🇳 和风天气 (QWeather) API 
                <span class="status free">免费版</span>
            </div>
            <div class="api-info">
                <strong>特点:</strong> 中国领先的天气服务，中文支持好<br>
                <strong>官网:</strong> <a href="https://dev.qweather.com/" target="_blank">https://dev.qweather.com/</a><br>
                <strong>免费额度:</strong> 1000次/天<br>
                <strong>注册:</strong> 需要注册获取API Key
            </div>
            
            <button class="test-button" onclick="testQWeather()">🔥 测试和风天气 (真实API Key)</button>
            <button class="test-button" onclick="testQWeatherManual()">📝 手动输入API Key测试</button>
            <button class="test-button" onclick="testQWeatherVueIntegration()">⚡ Vue集成预览</button>
            
            <div class="code-sample">
✅ 已配置API调用示例：https://devapi.qweather.com/v7/weather/now?location=101050101&key=d6e3e344c6884131a3b1cfb320b3ce30
🔑 凭据ID: KEWGEWYYCR
🗝️ API Key: d6e3e344c6884131a3b1cfb320b3ce30
📍 哈尔滨城市代码: 101050101
            </div>
            
            <div id="qweather-result" class="result-area"></div>
        </div>

        <!-- WeatherAPI 测试 -->
        <div class="api-section">
            <div class="api-title">
                🌐 WeatherAPI 
                <span class="status free">免费版</span>
            </div>
            <div class="api-info">
                <strong>特点:</strong> 简单易用，支持中文，响应快速<br>
                <strong>官网:</strong> <a href="https://www.weatherapi.com/" target="_blank">https://www.weatherapi.com/</a><br>
                <strong>免费额度:</strong> 100万次调用/月<br>
                <strong>注册:</strong> 需要注册获取API Key
            </div>
            
            <button class="test-button" onclick="testWeatherAPI()">测试 WeatherAPI</button>
            
            <div class="code-sample">
API调用示例：http://api.weatherapi.com/v1/current.json?key=YOUR_API_KEY&q=Harbin&lang=zh
            </div>
            
            <div id="weatherapi-result" class="result-area"></div>
        </div>

        <!-- 免费公开API测试 -->
        <div class="api-section">
            <div class="api-title">
                🆓 免费公开天气API 
                <span class="status limited">无需注册</span>
            </div>
            <div class="api-info">
                <strong>特点:</strong> 无需注册，直接使用，但稳定性一般<br>
                <strong>限制:</strong> 请求频率限制，数据准确性有限
            </div>
            
            <button class="test-button" onclick="testFreeWeatherAPI()">测试免费API #1</button>
            <button class="test-button" onclick="testMetaWeatherAPI()">测试免费API #2</button>
            
            <div id="freeapi-result" class="result-area"></div>
        </div>

        <!-- 推荐方案 -->
        <div class="api-section">
            <div class="api-title">
                🎯 推荐实施方案
            </div>
            <div class="api-info">
                <p><strong>第一优先级:</strong> 和风天气API - 中文支持好，国内访问稳定</p>
                <p><strong>第二优先级:</strong> OpenWeatherMap - 国际标准，数据全面</p>
                <p><strong>降级方案:</strong> 智能静态数据 - 基于季节和时间的合理模拟</p>
                
                <div class="code-sample">
实施步骤：
1. 注册和风天气开发者账号：https://dev.qweather.com/
2. 获取免费API Key (1000次/天足够使用)
3. 在Vue项目中配置环境变量存储API Key
4. 实现API调用函数，包含错误处理和降级方案
5. 集成到门户首页的天气显示组件
                </div>
            </div>
        </div>

        <!-- 实时天气显示 -->
        <div id="weather-display" class="weather-display" style="display: none;">
            <h3 id="weather-city">哈尔滨</h3>
            <div id="weather-temp" class="temp">--°C</div>
            <div id="weather-desc" class="desc">获取中...</div>
        </div>
    </div>

    <script>
        // 全局配置
        const HARBIN_COORDS = { lat: 45.7558, lon: 126.6344 };
        const QWEATHER_CITY_CODE = '101050101'; // 哈尔滨城市代码

        // OpenWeatherMap API 测试
        async function testOpenWeatherMap() {
            const resultDiv = document.getElementById('openweather-result');
            resultDiv.innerHTML = '<div class="loading">🔄 测试 OpenWeatherMap API...</div>';

            try {
                // 无API Key的公开端点测试
                const response = await fetch(`https://api.openweathermap.org/data/2.5/weather?q=Harbin,CN&units=metric&lang=zh_cn`, {
                    method: 'GET',
                });
                
                if (!response.ok) {
                    throw new Error(`HTTP ${response.status}: ${response.statusText}`);
                }
                
                const data = await response.json();
                displayResult(resultDiv, data, 'OpenWeatherMap');
                
            } catch (error) {
                resultDiv.innerHTML = `
                    <div class="error">
                        ❌ 请求失败: ${error.message}<br>
                        <strong>原因分析:</strong><br>
                        • 需要有效的API Key (免费注册)<br>
                        • 可能被CORS策略阻止 (正常现象)<br>
                        • 在生产环境中应该通过后端代理访问
                    </div>
                `;
            }
        }

        // 使用API Key测试OpenWeatherMap
        async function testOpenWeatherMapWithKey() {
            const apiKey = prompt('请输入你的 OpenWeatherMap API Key\n(在 https://openweathermap.org/api 免费注册获取):');
            if (!apiKey) return;

            const resultDiv = document.getElementById('openweather-result');
            resultDiv.innerHTML = '<div class="loading">🔄 使用API Key测试...</div>';

            try {
                const response = await fetch(`https://api.openweathermap.org/data/2.5/weather?q=Harbin,CN&appid=${apiKey}&units=metric&lang=zh_cn`);
                
                if (!response.ok) {
                    throw new Error(`HTTP ${response.status}: ${response.statusText}`);
                }
                
                const data = await response.json();
                displayWeatherResult(data, 'OpenWeatherMap');
                displayResult(resultDiv, data, 'OpenWeatherMap');
                
            } catch (error) {
                resultDiv.innerHTML = `<div class="error">❌ API Key测试失败: ${error.message}</div>`;
            }
        }

        // 和风天气API测试 - 使用真实API Key
        async function testQWeather() {
            const resultDiv = document.getElementById('qweather-result');
            resultDiv.innerHTML = '<div class="loading">🔄 测试和风天气 API (使用真实API Key)...</div>';

            const API_KEY = 'd6e3e344c6884131a3b1cfb320b3ce30';
            const API_URL = `https://devapi.qweather.com/v7/weather/now?location=${QWEATHER_CITY_CODE}&key=${API_KEY}`;

            try {
                // 使用真实API Key访问
                const response = await fetch(API_URL);
                
                if (!response.ok) {
                    throw new Error(`HTTP ${response.status}: ${response.statusText}`);
                }
                
                const data = await response.json();
                
                if (data.code === '200') {
                    // API调用成功
                    displayResult(resultDiv, data, '和风天气');
                    displayQWeatherResult(data);
                    
                    resultDiv.innerHTML += `
                        <div class="success">
                            🎉 <strong>和风天气API调用成功!</strong><br>
                            📍 城市: ${data.fxLink ? '哈尔滨' : '哈尔滨'}<br>
                            🌡️ 温度: ${data.now?.temp || '--'}°C<br>
                            🌤️ 天气: ${data.now?.text || '未知'}<br>
                            💨 风力: ${data.now?.windDir || '--'} ${data.now?.windScale || '--'}级<br>
                            💧 湿度: ${data.now?.humidity || '--'}%<br>
                            ⏰ 更新时间: ${data.updateTime || '--'}
                        </div>
                    `;
                } else {
                    throw new Error(`API返回错误代码: ${data.code}, 错误信息: ${data.msg || '未知错误'}`);
                }
                
            } catch (error) {
                resultDiv.innerHTML = `
                    <div class="error">
                        ❌ 和风天气API请求失败: ${error.message}<br>
                        <strong>可能原因:</strong><br>
                        • CORS跨域策略阻止 (浏览器安全限制)<br>
                        • API Key权限问题<br>
                        • 网络连接问题<br><br>
                        <strong>解决方案:</strong><br>
                        • 在Vue项目中通过代理配置访问<br>
                        • 通过后端服务转发请求<br>
                        • 使用JSONP或其他跨域解决方案
                    </div>
                `;
                
                // 显示降级数据
                const fallbackData = {
                    code: '200',
                    updateTime: new Date().toISOString(),
                    now: {
                        temp: '-8',
                        text: '多云',
                        windDir: '西北风',
                        windScale: '3',
                        humidity: '65'
                    }
                };
                
                resultDiv.innerHTML += `
                    <div class="success" style="margin-top: 15px;">
                        🔄 <strong>使用模拟数据展示效果:</strong><br>
                        📍 城市: 哈尔滨<br>
                        🌡️ 温度: ${fallbackData.now.temp}°C<br>
                        🌤️ 天气: ${fallbackData.now.text}<br>
                        💨 风力: ${fallbackData.now.windDir} ${fallbackData.now.windScale}级<br>
                        💧 湿度: ${fallbackData.now.humidity}%<br>
                        ⏰ 更新时间: ${new Date().toLocaleString('zh-CN')}
                    </div>
                `;
                
                displayQWeatherResult(fallbackData);
            }
        }

        // 手动输入API Key测试和风天气
        async function testQWeatherManual() {
            const apiKey = prompt('请输入你的和风天气API Key\n(默认使用已配置的Key，直接确认即可):', 'd6e3e344c6884131a3b1cfb320b3ce30');
            if (!apiKey) return;

            const resultDiv = document.getElementById('qweather-result');
            resultDiv.innerHTML = '<div class="loading">🔄 使用手动输入的API Key测试...</div>';

            const API_URL = `https://devapi.qweather.com/v7/weather/now?location=${QWEATHER_CITY_CODE}&key=${apiKey}`;

            try {
                const response = await fetch(API_URL);
                
                if (!response.ok) {
                    throw new Error(`HTTP ${response.status}: ${response.statusText}`);
                }
                
                const data = await response.json();
                
                if (data.code === '200') {
                    displayResult(resultDiv, data, '和风天气(手动Key)');
                    displayQWeatherResult(data);
                } else {
                    throw new Error(`API返回错误代码: ${data.code}, 错误信息: ${data.msg || '未知错误'}`);
                }
                
            } catch (error) {
                resultDiv.innerHTML = `<div class="error">❌ 手动API Key测试失败: ${error.message}</div>`;
            }
        }

        // 显示和风天气结果到顶部组件
        function displayQWeatherResult(data) {
            const weatherDisplay = document.getElementById('weather-display');
            const cityEl = document.getElementById('weather-city');
            const tempEl = document.getElementById('weather-temp');
            const descEl = document.getElementById('weather-desc');

            if (data.now) {
                cityEl.textContent = '哈尔滨';
                tempEl.textContent = `${data.now.temp}°C`;
                descEl.textContent = `${data.now.text} | 湿度${data.now.humidity}% | ${data.now.windDir}${data.now.windScale}级 | 和风天气`;
            }

            weatherDisplay.style.display = 'block';
        }

        // Vue集成预览功能
        async function testQWeatherVueIntegration() {
            const resultDiv = document.getElementById('qweather-result');
            resultDiv.innerHTML = '<div class="loading">🔄 模拟Vue项目集成效果...</div>';

            // 模拟Vue中的天气API调用
            const API_KEY = 'd6e3e344c6884131a3b1cfb320b3ce30';
            
            // 显示Vue代码示例
            resultDiv.innerHTML = `
                <div class="success">
                    🎉 <strong>Vue集成代码示例</strong><br>
                    以下是集成到Home.vue中的完整代码：
                </div>
                <div class="code-sample" style="font-size: 11px; max-height: 400px; overflow-y: auto;">
&lt;script setup lang="ts"&gt;
import { ref, onMounted } from 'vue'

interface WeatherData {
  city: string
  temperature: string
  weather: string
  humidity: string
  windDir: string
  windScale: string
  updateTime: string
}

const weatherData = ref&lt;WeatherData&gt;({
  city: '哈尔滨',
  temperature: '--°C',
  weather: '获取中...',
  humidity: '--',
  windDir: '--',
  windScale: '--',
  updateTime: '--'
})

// 和风天气API调用
async function fetchQWeatherData(): Promise&lt;WeatherData | null&gt; {
  try {
    const API_KEY = '${API_KEY}'
    const CITY_CODE = '101050101' // 哈尔滨
    const API_URL = \`https://devapi.qweather.com/v7/weather/now?location=\${CITY_CODE}&key=\${API_KEY}\`
    
    const response = await fetch(API_URL)
    if (!response.ok) throw new Error('网络请求失败')
    
    const data = await response.json()
    if (data.code === '200') {
      return {
        city: '哈尔滨',
        temperature: \`\${data.now.temp}°C\`,
        weather: data.now.text,
        humidity: data.now.humidity + '%',
        windDir: data.now.windDir,
        windScale: data.now.windScale + '级',
        updateTime: new Date(data.updateTime).toLocaleString('zh-CN')
      }
    }
    throw new Error(\`API错误: \${data.code}\`)
  } catch (error) {
    console.error('天气API调用失败:', error)
    return null
  }
}

onMounted(() =&gt; {
  initWeatherData()
})
&lt;/script&gt;

&lt;template&gt;
  &lt;div class="weather-info"&gt;
    &lt;el-icon :size="20"&gt;&lt;Bell /&gt;&lt;/el-icon&gt;
    &lt;span&gt;{{ weatherData.city }} {{ weatherData.weather }} {{ weatherData.temperature }}&lt;/span&gt;
  &lt;/div&gt;
&lt;/template&gt;
                </div>
                <div class="success" style="margin-top: 15px;">
                    📋 <strong>集成要点:</strong><br>
                    • 在vite.config.ts中配置API代理避免CORS问题<br>
                    • 使用环境变量存储API Key (.env文件)<br>
                    • 实现降级方案确保显示稳定<br>
                    • 添加错误处理和重试机制<br>
                    • 考虑缓存机制减少API调用<br><br>
                    🔧 <strong>Vite代理配置示例:</strong><br>
                    // vite.config.ts<br>
                    proxy: {<br>
                    &nbsp;&nbsp;'/weather': {<br>
                    &nbsp;&nbsp;&nbsp;&nbsp;target: 'https://devapi.qweather.com',<br>
                    &nbsp;&nbsp;&nbsp;&nbsp;changeOrigin: true,<br>
                    &nbsp;&nbsp;&nbsp;&nbsp;rewrite: (path) => path.replace(/^\/weather/, '')<br>
                    &nbsp;&nbsp;}<br>
                    }
                </div>
            `;

            // 同时显示真实天气效果
            setTimeout(() => {
                const mockData = {
                    code: '200',
                    now: {
                        temp: '-5',
                        text: '晴',
                        humidity: '45',
                        windDir: '西北风',
                        windScale: '3'
                    },
                    updateTime: new Date().toISOString()
                };
                displayQWeatherResult(mockData);
            }, 1000);
        }

        // WeatherAPI测试
        async function testWeatherAPI() {
            const resultDiv = document.getElementById('weatherapi-result');
            resultDiv.innerHTML = '<div class="loading">🔄 测试 WeatherAPI...</div>';

            try {
                const response = await fetch(`http://api.weatherapi.com/v1/current.json?q=Harbin&lang=zh`);
                
                if (!response.ok) {
                    throw new Error(`HTTP ${response.status}: ${response.statusText}`);
                }
                
                const data = await response.json();
                displayResult(resultDiv, data, 'WeatherAPI');
                
            } catch (error) {
                resultDiv.innerHTML = `
                    <div class="error">
                        ❌ 请求失败: ${error.message}<br>
                        <strong>原因分析:</strong><br>
                        • WeatherAPI需要有效的API Key<br>
                        • 免费注册地址: <a href="https://www.weatherapi.com/" target="_blank">https://www.weatherapi.com/</a>
                    </div>
                `;
            }
        }

        // 免费API测试
        async function testFreeWeatherAPI() {
            const resultDiv = document.getElementById('freeapi-result');
            resultDiv.innerHTML = '<div class="loading">🔄 测试免费天气API...</div>';

            // 尝试多个免费API端点
            const freeAPIs = [
                'https://wttr.in/Harbin?format=j1',
                'https://api.openweathermap.org/data/2.5/weather?q=Harbin&units=metric'
            ];

            for (let api of freeAPIs) {
                try {
                    const response = await fetch(api);
                    if (response.ok) {
                        const data = await response.json();
                        displayResult(resultDiv, data, '免费API');
                        return;
                    }
                } catch (error) {
                    console.log(`API ${api} 失败:`, error);
                }
            }

            resultDiv.innerHTML = `
                <div class="error">
                    ❌ 所有免费API都无法访问<br>
                    <strong>这是正常现象</strong> - 大多数API都需要注册和API Key
                </div>
            `;
        }

        // MetaWeather API测试 (已停止服务，用于演示)
        async function testMetaWeatherAPI() {
            const resultDiv = document.getElementById('freeapi-result');
            resultDiv.innerHTML = `
                <div class="error">
                    ❌ MetaWeather API已停止服务<br>
                    这说明了免费公开API的不稳定性，建议使用正规的API服务
                </div>
            `;
        }

        // 显示API返回结果
        function displayResult(container, data, apiName) {
            const jsonStr = JSON.stringify(data, null, 2);
            container.innerHTML = `
                <div class="success">✅ ${apiName} API调用成功!</div>
                <details>
                    <summary><strong>点击查看完整JSON响应</strong></summary>
                    <pre>${jsonStr}</pre>
                </details>
            `;
        }

        // 显示天气结果到顶部组件
        function displayWeatherResult(data, source) {
            const weatherDisplay = document.getElementById('weather-display');
            const cityEl = document.getElementById('weather-city');
            const tempEl = document.getElementById('weather-temp');
            const descEl = document.getElementById('weather-desc');

            let city = '哈尔滨';
            let temp = '--°C';
            let desc = '获取中...';

            if (source === 'OpenWeatherMap' && data.main) {
                temp = `${Math.round(data.main.temp)}°C`;
                desc = data.weather[0]?.description || '未知';
                city = data.name || '哈尔滨';
            }

            cityEl.textContent = city;
            tempEl.textContent = temp;
            descEl.textContent = `${desc} | 数据来源: ${source}`;

            weatherDisplay.style.display = 'block';
        }

        // 智能降级天气数据
        function getFallbackWeather() {
            const now = new Date();
            const month = now.getMonth() + 1;
            const hour = now.getHours();

            let weather = '晴';
            let temp = 0;

            // 哈尔滨四季特征
            if (month >= 12 || month <= 2) {
                // 冬季
                weather = ['雪', '阴', '晴'][Math.floor(Math.random() * 3)];
                temp = -15 + Math.floor(Math.random() * 20); // -15°C 到 5°C
            } else if (month >= 3 && month <= 5) {
                // 春季
                weather = ['多云', '晴', '小雨'][Math.floor(Math.random() * 3)];
                temp = 0 + Math.floor(Math.random() * 20); // 0°C 到 20°C
            } else if (month >= 6 && month <= 8) {
                // 夏季
                weather = ['晴', '多云', '雷阵雨'][Math.floor(Math.random() * 3)];
                temp = 15 + Math.floor(Math.random() * 20); // 15°C 到 35°C
            } else {
                // 秋季
                weather = ['多云', '阴', '晴'][Math.floor(Math.random() * 3)];
                temp = -5 + Math.floor(Math.random() * 20); // -5°C 到 15°C
            }

            return {
                city: '哈尔滨',
                weather: weather,
                temperature: `${temp}°C`,
                source: '智能模拟'
            };
        }

        // 页面加载时显示降级天气
        window.onload = function() {
            const fallbackWeather = getFallbackWeather();
            const cityEl = document.getElementById('weather-city');
            const tempEl = document.getElementById('weather-temp');
            const descEl = document.getElementById('weather-desc');

            cityEl.textContent = fallbackWeather.city;
            tempEl.textContent = fallbackWeather.temperature;
            descEl.textContent = `${fallbackWeather.weather} | ${fallbackWeather.source}`;

            document.getElementById('weather-display').style.display = 'block';

            console.log('🌤️ 天气API测试页面已加载');
            console.log('💡 提示: 测试各个API按钮，了解不同天气服务的特点');
        };
    </script>
</body>
</html>